<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="plane.css" />
	
</head>
<body>
	<div id = "body_main" class = "main">
		<ul id = "options" class = "options">
			<li value="1">超级困难</li>
			<li value="2">非常困难</li>
			<li value="3">比较困难</li>
			<li value="4">非常简单</li>
		</ul>
	</div>
</body>
</html>
<script>
//	 角色：
//		 * 1.引擎
//		 * 		1. 选择
//		 * 			1》获取元素
//		 * 			2》添加事件
//		 * 			3》移除
//		 * 			4>记录游戏难度
//		 * 		2.加载
//		 * 			1》创建并添加logo
//		 * 			2>创建并添加loading
//		 * 			3>创置背景图运动
//		 * 			4》超时 - 清场 - 开始游戏
//		 * 		3.开始游戏
//		 * 			1》我方飞机入场
//		 * 			2》开火
//		 * 			3》创建敌机
//		 *		4.设置敌机概率
//		 * 2.我方飞机
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置运动
//		 * 		4.开火（注意频率）
//		 * 		5.数组（记录创建的子弹）
//		 * 3.子弹
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置运动
//		 * 		4.爆炸（注意清除子弹和数组中的子弹）
//		 * 4.敌机
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置定位
//		 * 		4.设置运动 
//		 * 		5.碰撞检测
//		 */
         
         window.onload = function(){
         	new Engine();
         }
         class Plane{
         	constructor(){
         		this.ele = createEle("div","my-warplain");
         		this.bullet = [];
         	}
         	init(){
        		appendBody(this.ele);
        		this.ele.style.left = document.documentElement.clientWidth/2 - this.ele.offsetWidth/2 + "px";
        		this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + "px";
        		this.sport();
        	}
        	sport(){
        		const body_main = document.getElementById("body_main");
        		document.onmousemove = function(evt){
        			const e = evt || window.event;
        			let left = e.pageX - this.ele.offsetWidth/2;
        			let top = e.pageY - this.ele.offsetHeight/2;
        			if(left <= body_main.offsetLeft){
        				left = body_main.offsetLeft;
        			}else if(left >= body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth){
        				left = body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth;
        			}
        			this.ele.style.left = left + "px";
        			this.ele.style.top = top + "px";
        		}.bind(this)
        	}
        	//开火设置
        	fire(frequecy){
        		let defaultFrequecy = 200;
        		switch(frequecy){
        			case 0 : defaultFrequecy = 600; break;
        			case 1 : defaultFrequecy = 400; break;
        			case 2 : defaultFrequecy = 200; break;
        			case 3 : defaultFrequecy = 50;
        		};
        		let id = 0;
        		setInterval(function(){
        			this.bullet.push(new Bullet(id));
        			id ++;
        		}.bind(this),defaultFrequecy);
        	}
         }
         let myPlane = new Plane();
         class Engine{
         	constructor(){
         		this.ele = document.getElementById("body_main");
         	    this.oList = document.getElementsByTagName("li");
         	    this.init();
         	}
         	init(){
         		const that = this;
         		for(let i = 0;i < this.oList.length;i ++){
         			this.oList[i].onclick = function(){
         				this.parentNode.remove(this);
         				that.loadPage();
         				that.frequecy = this.index;
         			};
         		}
         	}
            loadPage(){
         	    this.logo = createEle("div","logo");
         	    appendBody(this.logo);
         	    this.loading = createEle("div","loading");
         	    appendBody(this.loading);
         	    let index = 1;
         	    this.loadingTimer = setInterval(function(){
         		   this.loading.style.background = "url(images/loading"+(index ++ % 3 + 1)+".png) no-repeat";
         	     }.bind(this),500)
         	    let positionY = 0;
         	    setInterval(function(){
         		this.ele.style.backgroundPositionY = ++positionY + "px";
         	     }.bind(this),30)
         	    setTimeout(function(){
         		this.logo.remove();
         		this.loading.remove();
         		clearInterval(this.loadingTimer);
         		this.startGame();
         	    }.bind(this),3000)
             }
            startGame(){
         	    myPlane.init();
         	    myPlane.fire(this.frequecy);
         	    this.createEnemy();
           }
           createEnemy(){
         	   setInterval(function(){
         		  Math.random() > 0.5 ? new Enemy(0) : "";
         	    },1000);
         	   setInterval(function(){
         		  Math.random() > 0.3 ? new Enemy(1) : "";
         	   },2000);
         	   setInterval(function(){
         		  Math.random() > 0.2 ? new Enemy(2) : "";
         	  },5000);
            }
          }
         
        class Bullet{
        	constructor(id){
        		this.id = id;
        	    this.ele = createEle("div","bullet");
        	    this.init();
        	}
        	init(){
        		this.ele.id = this.id;
        		appendBody(this.ele);
        		this.ele.style.left = myPlane.ele.offsetLeft + myPlane.ele.offsetWidth/2 - this.ele.offsetWidth/2 + "px";
        		this.ele.style.top = myPlane.ele.offsetTop - this.ele.offsetHeight + "px";
        		this.sport();
        	}
        	sport(){
        		this.timer = setInterval(function(){
        			this.ele.style.top = this.ele.offsetTop - 10 + "px";
        			if(this.ele.style.top <= 10){
        			    this.ele.boom();
        		  }
        		}.bind(this),50)        		
        	}
        	boom(){
        		this.ele.className = "bullet_die";
        		clearInterval(this.timer);
        		setTimeout(function(){
        			 this.ele.remove();
        			for(var i = 0;i < myPlane.bullet.length;i ++){
        			  if(this.ele.id == myPlane.bullet[i].id){
        				myPlane.bullet.splice(i,1);
        			}
        		}
        	}.bind(this),100)       		
        }
       }
        class Enemy{
        	constructor(type){
        		this.type = type;
       	        this.init();
        	}
        	init(){
       		switch(this.type){
       			case 0 : this.ele = createEle("div","enemy-small");
       			         this.ps = 1;
       			         this.speed = 15;
       			         break;
       			case 1 : this.ele = createEle("div","enemy-middle");
       			         this.ps = 5;
       			         this.speed = 10;
       			         break;
       			case 2 : this.ele = createEle("div","enemy-large");
       			         this.ps = 20;
       			         this.speed = 3;
       		}
       		appendBody(this.ele);
       		this.position();
       	}
       	position(){
       		const body_main = document.getElementById("body_main");
       		this.ele.style.left = randomInt(body_main.offsetLeft,body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth) + "px";
       		this.ele.style.top = 0;
       		this.sport();
       	}
       	sport(){       		
       		this.timer = setInterval(function(){
       			this.ele.style.top = this.ele.offsetTop + this.speed + "px";
       			if(this.ele.offsetTop >= document.documentElement.clientHeight){
       				this.ele.remove();
       				clearInterval(this.timer);
       			};
       			this.collision();
       		}.bind(this),50)   		
       	}
       	collision(){
       		for(let i = 0;i < myPlane.bullet.length;i ++){
       			if(!(myPlane.bullet[i].ele.offsetLeft + myPlane.bullet[i].ele.offsetWidth < this.ele.offsetLeft || this.ele.offsetLeft + this.ele.offsetWidth < myPlane.bullet[i].ele.offsetLeft)){
       				if(!(myPlane.bullet[i].ele.offsetTop + myPlane.bullet[i].ele.offsetHeight < this.ele.offsetTop || this.ele.offsetTop + this.ele.offsetHeight < myPlane.bullet[i].ele.offsetTop)){
       					myPlane.bullet[i].boom();
       					 this.ps --;
       					if(this.ps <= 0){
       					 this.ele.remove();
       				}
       			  }
       				
       		    }
       		}
       	}
      }
    
         Element.prototype.remove = function(){
         	this.parentNode.removeChild(this);
         }
         function createEle(target,className){
         	var ele = document.createElement(target);
         	ele.className = className;
         	return ele;
         }
         function appendBody(ele){
         	document.body.appendChild(ele);
         }
         function randomInt(min,max){
         	return Math.floor(Math.random()*(max-min+1) + min);
         }
</script>